<template>
  <!-- <div class="follow_record">
    <div class="left"> </div>
    <div class="right">
      <div class="time">23:46</div>
      <div>【跟进记录】</div>
      <div> <span class="nikename">【员工姓名】</span> </div>
      <div><span class="stage">【商机名称】</span></div>
      <div>【商机内容】</div>
    </div>
  </div> -->
  <template v-if="businessData.follow?.length">
    <div class="follow_record" v-for="item in businessData.follow" :key="item.follow_id">
      <div class="left"> </div>
      <div class="right">
        <div class="time">{{ item.created_at }}</div>
        <div>【跟进记录】</div>
        <div>
          <span class="nikename">{{ item.follow_content.operator_name }} </span>
          <span> 增加一条跟进记录。</span>
        </div>
        <div>
          <span>{{ businessData.name }} </span> —
          <span class="stage"> {{ item.follow_content.stage_name }}</span>
        </div>
        <div v-if="item.images[0]" class="content">
          <el-image class="el_image" v-for="imgUrl in item.images" :key="imgUrl" :preview-src-list="[imgUrl]" :preview-teleported="true" :src="imgUrl" fit="cover">
            <template #error>
              <el-icon><icon-picture /></el-icon>
            </template>
          </el-image>
        </div>
        {{ item.follow_content.content }}
      </div>
    </div>
  </template>
  <div v-else class="empty">
    <div><img class="emty_img" src="@/assets/noData.png" alt="" /></div>
    <div>暂无数据</div>
  </div>
</template>

<script setup lang="ts">
  import { withDefaults, defineProps } from 'vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  interface Props {
    businessData: any
  }
  const props = withDefaults(defineProps<Props>(), {
    businessData: () => {
      return {
        follow: [],
        predictTime: ''
      }
    }
  })
</script>

<style lang="scss" scoped>
  .empty {
    margin: 100px 0;
    text-align: center;
    .emty_img {
      transform: translateX(15%);
    }
  }
  .nikename {
    color: #1289fd;
  }
  .stage {
    color: #fd8a37;
  }
  .follow_record {
    display: flex;
    padding: 30px;
    padding-bottom: 15px;
    .left {
      position: relative;

      &::before {
        position: absolute;
        top: -25px;
        left: -7px;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid #ff6b00;
      }
      &::after {
        content: '';
        position: absolute;
        top: -9px;
        left: -1px;
        height: calc(100% + 25px);
        border-left: 1px dotted #ffc69e;
      }
    }
    .right {
      flex: 1;
      position: relative;
      margin-left: 12px;
      padding: 12px;
      background: #f9f9f9;
      line-height: 25px;
      .time {
        position: absolute;
        top: -31px;
        left: 12px;
        color: #969696;
      }
      .content {
        display: flex;
        flex-wrap: wrap;
        .el_image {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
      }
    }
  }
  .zuotian {
    padding: 4px 0 4px 24px;
  }
</style>
